<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>localStorage</h1>
  <button id="save">save</button>
  <button id="get">get</button>
  <button id="remove">remove</button>
  <button id="clear">clear</button>

  <script>
    let btn = document.getElementById("save");
    let btn2 = document.getElementById("get");
    let btn3 = document.getElementById("remove");
    let btn4 = document.getElementById("clear");


    btn.onclick = function () {
      const obj = {
        name: 'zs',
        age: 18,
      }
      localStorage.setItem('user', JSON.stringify(obj));
    }

    btn2.onclick = () => {
      const user = localStorage.getItem('user')
      console.log(JSON.parse(user));
    }

    btn3.onclick = () => {
      localStorage.removeItem('user');
    }

    btn4.onclick = () => {
      localStorage.clear();
    }
  </script>
</body>

</html>